precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;

/**
 * 绘制一个弹跳球效果
 * @param uv 输入的纹理坐标
 * @return 返回弹跳球的颜色值，rgb分量相同形成灰度效果
 */
vec3 DrawBounceBall(vec2 uv, float A, float w, float m) {
    uv *= 8.;// 将uv坐标放大4倍，使球体更小并居中显示
    // 根据A*cos(w*t+m)控制球体在垂直方向上的弹跳运动
    uv.y += A * cos(w * u_time + m);
    float val = clamp((1.0 - length(uv)), 0., 1.);// 计算距离场并限制在0-1范围内，形成圆形
    val = smoothstep(0., 0.05, val);// 对边缘进行平滑处理，使球体边缘更加柔和
    return vec3(val, val, val);// 返回灰度颜色值
}

void main(void) {
    // 将屏幕坐标转换为归一化坐标系，并调整原点到中心
    vec2 uv = (gl_FragCoord.xy) / u_resolution.y;
    uv -= 0.5;
    
    vec3 col = vec3(0.0);// 初始化背景颜色为黑色
    
    // 创建多个具有不同参数的弹跳球来展示效果
    vec3 ball1 = DrawBounceBall(uv - vec2(-0.3, 0.3), 0.5, 3.14, 0.0);     // 标准弹跳
    vec3 ball2 = DrawBounceBall(uv - vec2(0.0, 0.0), 0.3, 6.28, 0.0);      // 快速浅弹跳
    vec3 ball3 = DrawBounceBall(uv - vec2(0.3, -0.3), 0.7, 1.57, 1.57);    // 慢速深弹跳，相位偏移
    
    // 合成所有球体效果
    vec3 bb = ball1 + ball2 + ball3;
    
    // 确保颜色值不超过1.0
    bb = clamp(bb, 0.0, 1.0);
    
    gl_FragColor = vec4(bb, 1.0);// 输出最终颜色
}